import { defineComponent, ref } from 'vue';
import { ElCard, ElRow, ElCol, ElStatistic } from 'element-plus';

/**
 * Dashboard页面组件
 * 展示主要统计数据和系统概览
 */
export default defineComponent({
  name: 'DashboardTsx',

  /**
   * 路由配置
   * 使用route属性定义路由相关信息
   */
  route: {
    name: 'DashboardTsx',
    path: '/dashboard-tsx',
    meta: {
      title: 'TSX示例首页',
      icon: 'dashboard',
      layout: 'pc-default',
      // 排序号，数字越小越靠前
      orderNo: 1,
      // 是否需要缓存
      noCache: false,
      // 是否在菜单中显示
      hideMenu: false,
      // 是否固定在标签栏
      affix: true,
      // 用于控制权限
      roles: ['admin', 'user'],
      // 菜单权限标识
      permissions: ['dashboard:view'],
    },
    // 当路由有多个子路由时，是否总是显示根路由
    alwaysShow: true,
    // 子路由示例 - 正确的配置方式
    children: [
      {
        path: 'charts', // 路径会自动拼接为 /dashboard-tsx/charts
        name: 'DashboardCharts',
        // 不需要手动指定component，vite-plugin-pages会自动处理
        meta: {
          title: '图表',
          icon: 'chart',
          // 角色权限
          roles: ['admin'],
          // 是否缓存
          noCache: true,
        },
      },
      {
        path: 'tables',
        name: 'DashboardTables',
        meta: {
          title: '表格',
          icon: 'table',
        },
      },
    ],
  },

  setup() {
    const visitCount = ref(2534);
    const userCount = ref(1234);
    const orderCount = ref(5678);
    const revenue = ref(89600);

    return () => (
      <div class="dashboard-container">
        <ElRow gutter={20}>
          <ElCol span={6}>
            <ElCard shadow="hover">
              <ElStatistic title="访问数" value={visitCount.value} />
            </ElCard>
          </ElCol>
          <ElCol span={6}>
            <ElCard shadow="hover">
              <ElStatistic title="用户数" value={userCount.value} />
            </ElCard>
          </ElCol>
          <ElCol span={6}>
            <ElCard shadow="hover">
              <ElStatistic title="订单数" value={orderCount.value} />
            </ElCard>
          </ElCol>
          <ElCol span={6}>
            <ElCard shadow="hover">
              <ElStatistic title="收入" value={revenue.value} precision={2} />
            </ElCard>
          </ElCol>
        </ElRow>

        <div class="content-container" style="margin-top: 20px">
          <ElCard shadow="hover" header="系统概览">
            <p>这是一个使用TSX编写的Dashboard示例</p>
            <p>您可以在这里添加更多内容</p>
            <p>子路由将会自动处理，无需手动指定组件</p>
          </ElCard>
        </div>
      </div>
    );
  },
});
